<template>
	<div>
		<button type="button" @click="click()">异步组件</button>
		<br>
		<my-component v-if="my_component"></my-component>
	</div>
</template>

<script>
	// import my_component1 from './my-async-component.vue'
	import LoadingComponent from './LoadingComponent.vue'
	export default{
		data() {
			return{
				my_component:false
			}
		},
		components:{
			//异步组件或路由<link href="" rel="prefetch">  异步组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
			 'my-component': () => import('./my-async-component')
			 // 'my-component':my_component1
		},
		methods:{
			click(){
				this.my_component=!this.my_component
			}
		}
	}
</script>

<style scoped>
	.lak{
		color: red;
		background-color: red;
	}
</style>
